<template>
    <div>
        <div style="display: flex;">
            <el-button icon="el-icon-plus" type="primary" @click="showAddSalaryView">
                添加工资账套
            </el-button>
            <el-button icon="el-icon-delete" type="danger" size="small" :disabled="multipleSelection.length==0"
                       @click="deleteMany">批量删除
            </el-button>
            <el-button
              icon="el-icon-refresh"
              type="success"
              @click="initSalaries"
            >刷新数据</el-button>
        </div>
        <div style="margin-top: 10px">
            <el-table :data="salaries"
                      border
                      stripe
                      @selection-change="handleSelectionChange"
                      >
                <el-table-column
                    type="selection"
                    align="center"></el-table-column>
                <el-table-column
                  prop="name"
                  label="账套名称"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="basicSalary"
                  label="基本工资"
                ></el-table-column>
                <el-table-column
                  prop="trafficSalary"
                  label="交通补助"
                ></el-table-column>
                <el-table-column
                  prop="lunchSalary"
                  label="午餐补助"
                ></el-table-column>
                <el-table-column width="70" prop="bonus" label="奖金"></el-table-column>
                <el-table-column
                  prop="createDate"
                  label="创建时间"
                  align="center"
                ></el-table-column>
                <el-table-column label="养老金" align="center">
                    <el-table-column
                      prop="pensionPer"
                      label="比率"
                    ></el-table-column>
                    <el-table-column
                      prop="pensionBase"
                      label="基数"
                    ></el-table-column>
                </el-table-column>
                <el-table-column label="医疗保险" align="center">
                    <el-table-column
                      prop="medicalPer"
                      label="比率"
                    ></el-table-column>
                    <el-table-column
                      prop="medicalBase"
                      label="基数"
                    ></el-table-column>
                </el-table-column>
                <el-table-column label="公积金" align="center">
                    <el-table-column
                      prop="accumulationFundPer"
                      label="比率"
                    ></el-table-column>
                    <el-table-column
                      prop="accumulationFundBase"
                      label="基数"
                    ></el-table-column>
                </el-table-column>
                <el-table-column
                    width="200"
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button @click="showEditSalaryView(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteSalary(scope.row)"
                        >删除
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 修改编辑框 -->
        <!-- <el-dialog
                    :title="dialogTitle"
                    :visible.sync="dialogVisible"
                    width="50%">
                <div style="display: flex;justify-content: space-around;align-items: center">
                    <el-steps direction="vertical" :active="activeItemIndex">
                        <el-step :title="itemName" v-for="(itemName,index) in salaryItemName" :key="index"></el-step>
                    </el-steps>
                    <el-input v-model="salary[title]" :placeholder="'请输入'+salaryItemName[index]+'...'"
                              v-for="(value,title,index) in salary"
                              :key="index" v-show="activeItemIndex==index" style="width: 200px"></el-input>
                </div>
                <span slot="footer" class="dialog-footer">
        <el-button @click="preStep">{{activeItemIndex==10?'取消':'上一步'}}</el-button>
        <el-button type="primary" @click="nextStep">{{activeItemIndex==10?'完成':'下一步'}}</el-button>
      </span>
            </el-dialog> -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%">
            <div>
                <el-form :model="salary" :rules="rules" ref="salaryForm">
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="账套名称" prop="name">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.name"
                                  placeholder="请输入账套名称"
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="4">
                            <el-form-item label="基本工资" prop="basicSalary">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.basicSalary"
                                  placeholder="请输入基本工资"
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="4">
                            <el-form-item label="交通补助" prop="trafficSalary">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.trafficSalary"
                                  placeholder="请输入交通补助"
                                ></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="4">
                            <el-form-item label="午餐补助" prop="lunchSalary">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.lunchSalary"
                                  placeholder="请输入午餐补助"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="奖金" prop="bonus">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.bonus"
                                  placeholder="请输入奖金"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="养老金比率" prop="pensionPer">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.pensionPer"
                                  placeholder="请输入养老金比率"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="养老金基数" prop="pensionBase">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.pensionBase"
                                  placeholder="请输入养老金基数"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="医疗保险比率" prop="medicalPer">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.medicalPer"
                                  placeholder="请输入医疗保险比率"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="医疗保险基数" prop="medicalBase">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.medicalBase"
                                  placeholder="请输入医疗保险基数"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="公积金比率" prop="accumulationFundPer">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.accumulationFundPer"
                                  placeholder="请输入公积金比率"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="公积金基数" prop="accumulationFundBase">
                                <el-input
                                  size="mini"
                                  style="width: 150px"
                                  prefix-icon="el-icon-edit"
                                  v-model="salary.accumulationFundBase"
                                  placeholder="请输入公积金基数"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSalary">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "SalSob",
    data() {
        return {
            dialogVisible: false,
            dialogTitle: "添加工资账套",
            salaries: [],
            activeItemIndex: 0,
            multipleSelection: [],
            salaryItemName: [
                "基本工资",
                "交通补助",
                "午餐补助",
                "奖金",
                "养老金比率",
                "养老金基数",
                "医疗保险比率",
                "医疗保险基数",
                "公积金比率",
                "公积金基数",
                "账套名称",
            ],
            salary: {
                basicSalary: 0,
                trafficSalary: 0,
                lunchSalary: 0,
                bonus: 0,
                pensionPer: 0,
                pensionBase: 0,
                medicalPer: 0,
                medicalBase: 0,
                accumulationFundPer: 0,
                accumulationFundBase: 0,
                name: "",
            },
            rules: {
                basicSalary: [
                    {required: true, message: "请输入基本工资", trigger: "blur"},
                    {pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur"},
                ],
                trafficSalary: [
                    {required: true, message: "请输入交通补助", trigger: "blur"},
                    {pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur"},
                ],
                lunchSalary: [
                    {required: true, message: "请输入午餐补助", trigger: "blur"},
                    {pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur"},
                ],
                bonus: [
                    {required: true, message: "请输入奖金", trigger: "blur"},
                    {pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur"},
                ],
                pensionPer: [
                    {required: true, message: "请输入养老金比率", trigger: "blur"},
                    {pattern: /^(0.[0-9]+)$/, message: "请输入小于1的小数", trigger: "blur"},
                ],
                pensionBase: [
                    {required: true, message: "请输入养老金基数", trigger: "blur"},
                    {pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur"},
                ],
                medicalPer: [
                    {required: true, message: "请输入医疗保险比率", trigger: "blur"},
                    {pattern: /^(0.[0-9]+)$/, message: "请输入小于1的小数", trigger: "blur"},
                ],
                medicalBase: [
                    {required: true, message: "请输入医疗保险基数", trigger: "blur"},
                    {pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur"},
                ],
                accumulationFundPer: [
                    {required: true, message: "请输入公积金比率", trigger: "blur"},
                    {pattern: /^(0.[0-9]+)$/, message: "请输入小于1的小数", trigger: "blur"},
                ],
                accumulationFundBase: [
                    {required: true, message: "请输入公积金基数", trigger: "blur"},
                    {pattern: /^([1-9][0-9]*)$/, message: "请输入正整数", trigger: "blur"},
                ],
                name: [{required: true, message: "请输入账套名称", trigger: "blur"}],
            },
        };
    },
    mounted() {
        this.initSalaries();
    },
    methods: {
        showEditSalaryView(data) {
            this.dialogTitle = "修改工资账套";
            this.dialogVisible = true;
            this.salary.basicSalary = data.basicSalary;
            this.salary.trafficSalary = data.trafficSalary;
            this.salary.lunchSalary = data.lunchSalary;
            this.salary.bonus = data.bonus;
            this.salary.pensionPer = data.pensionPer;
            this.salary.pensionBase = data.pensionBase;
            this.salary.medicalPer = data.medicalPer;
            this.salary.medicalBase = data.medicalBase;
            this.salary.accumulationFundPer = data.accumulationFundPer;
            this.salary.accumulationFundBase = data.accumulationFundBase;
            this.salary.name = data.name;
            this.salary.id = data.id;
        },
        deleteSalary(data) {
            this.$confirm(
              "此操作将删除【" + data.name + "】账套，是否继续？",
              "提示",
              {
                  cancelButtonText: "取消",
                  confirmButtonText: "确定",
              }
            )
              .then(() => {
                  this.deleteRequest("/salary/sob/" + data.id).then((resp) => {
                      if (resp) {
                          this.initSalaries();
                      }
                  });
              })
              .catch(() => {
                  this.$message.info("取消删除!");
              });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        deleteMany() {
            this.$confirm('此操作将永久删除【' + this.multipleSelection.length + '】条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.multipleSelection.forEach(item => {
                    this.deleteRequest("/salary/sob/" + item.id).then((resp) => {
                        if (resp) {
                            this.initSalaries();
                        }
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        preStep() {
            if (this.activeItemIndex == 0) {
                return;
            } else if (this.activeItemIndex == 10) {
                //关闭对话框
                this.dialogVisible = false;
                return;
            }
            this.activeItemIndex--;
        },
        nextStep() {
            if (this.activeItemIndex == 10) {
                //如果等于10就提交
                if (this.salary.id) {
                    //这个是修改？
                    this.putRequest("/salary/sob/", this.salary).then((resp) => {
                        if (resp) {
                            this.initSalaries();
                            this.dialogVisible = false;
                        }
                    });
                } else {
                    this.postRequest("/salary/sob/", this.salary).then((resp) => {
                        if (resp) {
                            this.initSalaries();
                            this.dialogVisible = false;
                        }
                    });
                }
                return;
            }
            this.activeItemIndex++;
        },
        updateSalary() {
            //copy from nextStep
            //取消activeItemIndex。适用于一键提交
            this.$refs["salaryForm"].validate((valid) => {
                if (valid) {
                    if (this.salary.id) {
                        //这个是修改edit 因为有id
                        this.putRequest("/salary/sob/", this.salary).then((resp) => {
                            if (resp) {
                                this.initSalaries();
                                this.dialogVisible = false;
                            }
                        });
                    } else {
                        //这个是添加
                        this.postRequest("/salary/sob/", this.salary).then((resp) => {
                            if (resp) {
                                this.initSalaries();
                                this.dialogVisible = false;
                            }
                        });
                    }
                    return;
                }
            });
        },
        showAddSalaryView() {
            //数据初始化
            this.salary = {
                basicSalary: 9000,
                trafficSalary: 4000,
                lunchSalary: 800,
                bonus: 500,
                pensionPer: 0.05,
                pensionBase: 2000,
                medicalPer: 0.05,
                medicalBase: 2000,
                accumulationFundPer: 0.05,
                accumulationFundBase: 2000,
                name: "默认名称",
            };
            this.dialogTitle = "添加工资账套";
            this.activeItemIndex = 0;
            this.dialogVisible = true;
        },
        initSalaries() {
            this.getRequest("/salary/sob/").then((resp) => {
                if (resp) {
                    this.salaries = resp;
                }
            });
        },
    },
};
</script>

<style scoped>
</style>